<template>
  <div id="vditor"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import Vditor from 'vditor';
import 'vditor/dist/index.css';

onMounted(() => {
  const vditor = new Vditor('vditor', {
    // 可根据需求配置选项
    toolbar: [
      "emoji",
      "headings",
      "bold",
      "italic",
      "strike",
      "link",
      "|",
      "list",
      "ordered-list",
      "check",
      "outdent",
      "indent",
      "|",
      "quote",
      "line",
      "code",
      "inline-code",
      "insert-before",
      "insert-after",
      "|",
      "upload",
      "record",
      "table",
      "|",
      "undo",
      "redo",
      "|",
      "edit-mode",
      "content-theme",
      "code-theme",
      "export",
      {
        name: "more",
        toolbar: [
          "fullscreen",
          "both",
          "preview",
          "info",
          "help",
        ],
      }
    ],
    lang: "zh_CN",
    mode: "wysiwyg",
    height: '100%',
    preview: {
      markdown: {
        toc: true,
        mark: true,
        footnotes: true,
        autoSpace: true,
      },
      math: {
        engine: "KaTeX",
        inlineDigit: true,
      },
    },
  });
});
</script>

<style scoped>

</style>
